import React, { useCallback, useRef } from 'react';
import Player from 'xgplayer';
export default () => {
    const videoRef = useRef<HTMLDivElement>(null)
    const onChange = (e: any) => {
        if (!videoRef.current) return
        videoRef.current.innerHTML = ''
        console.log(e.target.files[0])
        const file: File = e.target.files[0]
        const srcUrl = window.URL.createObjectURL(file)
        if (file.name.includes('.flv')) {
            initFlvPlayer(srcUrl)
        } else {
            initVideo(srcUrl)
        }
    };
    const initVideo = (url: string) => {
        let player = new Player({
            id: 'video',
            url,
            playbackRate: [0.5, 0.75, 1, 1.5, 2], //传入倍速可选数组
            // pip: true,
            screenShot: true,
            autoplay: true,
            width: 720,
        });
    }
    const initFlvPlayer = (url: string) => {
        let player = new window.FlvPlayer({
            id: 'video',
            url,
            playbackRate: [0.5, 0.75, 1, 1.5, 2], //传入倍速可选数组
            // pip: true,
            screenShot: true,
            autoplay: true,
            
        });
    }

    return (
        <div>
            <input type="file" onChange={onChange} />
            <div ref={videoRef} id="video"></div>
        </div>
    );
};
